<template>
<div class="main">
    <div class="main-map">
      <div id="map"></div>
    </div>
    <about :map="map" :setpat="setpat" ref="about" :polyes="polyes" :hidden="hidden" :Appear="Appear" :pattern="pattern" @showcity="yy()"></about>
</div>
</template>

<script>
// import Axios from 'axios'
import about from '@/views/About.vue';
import VueEvent from '../../VueEvent.js';
import home from '@/views/Home.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
     map:null,
     hidden:'隐藏',
     Appear:'显示',
     pattern:'更改样式',
     drawControl:null,
     ponitlist:{},
     linelist:{},
     polylist:{},
     name:'',
     polyes:[]
    }
  },
  components:{
    about
  },
  mounted() {
    this.getmap();
    VueEvent.$on('to-hello',(data)=>{
  
     console.log(data,'data')
    });
  VueEvent.$emit('to-hell',this.map
    );
  },
  updated() {
      // this.getdata();
  },
  methods: {
          getmap () {
          this.smartmapx.mapbase = 'http://www.smartmapx.com';
          this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
          this.map=new this.smartmapx.Map({
              container: 'map',
              mapId: 'map_id_1',
              center: [116.39738, 39.90579],
              zoom: 12
            });
            //添加缩放条
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            //添加比例尺
            this.map.addControl(new this.smartmapx.ScaleControl({
              maxWidth: 100,
              unit: 'm'
            }));
            this.drawControl =new this.smartmapx.DrawControl({
               displayControlsDefault: false,
               controls: {
                 point: true,
                 line_string: true,
                 polygon: true,
              }
            });
            this.map.addControl(this.drawControl,'top-left');
            var features_pointes = {
	 		          type: "FeatureCollection",
	 		          features: []
	 	        };
            var features_lines = {
                type: "FeatureCollection",
                features: []
              };
            var features_polyes = {
                type: "FeatureCollection",
                features: []
              };
            this.map.on('draw.create',(e)=>{
              var data=e.features[0];
              if(data.geometry.type == "Point") {
                features_pointes.features.push(e.features[0]);
                console.log(JSON.stringify(features_pointes))
                this.map.getSource('pointes').setData(features_pointes);
              }else if(data.geometry.type == "LineString"){
                features_lines.features.push(e.features[0]);
                this.map.getSource('lines').setData(features_lines);
                console.log(JSON.stringify(features_lines))
              }else if(data.geometry.type == "Polygon"){
                features_polyes.features.push(e.features[0]);
                  this.map.getSource('polyges').setData(features_polyes);
                  console.log(JSON.stringify(features_polyes))
              }
              // this.drawControl.deleteAll();
            });
            this.map.on('load',(e)=>{
              this.getpointes();
              this.getdatafill();
              this.getlines();
  
              this.map.addSource('layerSource', {
              data: {
                type: "FeatureCollection",
                features: [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [[
                            [116.40 - 0.01, 39.92 + 0.01],
                            [116.40+ 0.01, 39.92+ 0.01],
                            [116.40+ 0.01, 39.92- 0.01],
                            [116.40- 0.01, 39.92- 0.01]
                        ]]
                    },
                    "properties": {
                    }
                  }]
               },
                type: 'geojson'
             });
             
            this.map.addLayer({
                  "id": 'poly',
                  "type": "fill",
                  "source": "layerSource",
                  "layout": {
                      "visibility": "visible"
                  },
                  "paint": {
                      "fill-color":{
                           "stops":[
                              [
                                11,
                               'yellow',
                              ],
                              [
                                12,
                                'rgb(189, 16, 224)',
                              ],
                              [
                                13,
                                'green',
                              ]
                          ]
                        },
                      'fill-outline-color': '#ff4040',
                      'fill-opacity': 0.6,
                  }
               });
                //添加点数据
            this.map.addSource('pointes',{
              type:'geojson',
              data:features_pointes
            });
            //添加线数据
            this.map.addSource('lines',{
              type:'geojson',
              data:features_lines
            });
            //添加面数据
            this.map.addSource('polyges',{
              type:'geojson',
              data:features_polyes
               });
            });
          },
         setShowHidden(){
              this.map.setLayoutProperty('poly', 'visibility', 'none');
              
         },
         appear(){
              this.map.setLayoutProperty('poly', 'visibility', 'visible');
         },
         setpat(){
               this.map.setPaintProperty('poly','fill-color', 'blue','fill-opacity', 1,'fill-outline-color','white');
               
         },
         getpointes(){
            this.$http.get('mock/point.json').then(response=>{
               this.ponitlist=response.data;
               console.log(response,'pointesese')
               this.name=this.ponitlist.features[0].properties.name;
               this.map.addSource('jj',{
                  type:'geojson',
                  data:this.ponitlist
               });
               const mag=require('../../public/img/1.png');
               this.map.loadImage(mag,(error,mage)=>{
                     if(error) throw error;
                     this.map.addImage('00100', mage, {
						         pixelRatio: 2
					         });
               });
               this.map.addLayer({
                 id:'7989',
                 type:'symbol',
                 source:'jj',
                 layout:{
            
                "icon-image": "00100",
                "text-field":'{name}',
                "text-offset": [
                     0,
                     1.5
               ],
                "text-font": [
                "Microsoft YaHei Regular"
                ],
                "text-size": 10,
                "visibility": "visible",
                 },
                 paint:{
                "text-color": "white",
                "text-halo-color": "red",
                "text-halo-width": 3,
                "text-halo-color": "red",
                "text-halo-blur": 1
                 },
               });
            },error=>{
              console.log(error)
            })
         },
         getlines() {
            this.$http.get('mock/line.json').then(response=>{
              this.linelist=response.data;
              this.map.addSource('kk',{
                type:'geojson',
                data:this.linelist
              });
              this.map.addLayer({
                id:'line899',
                type:'line',
                source:'kk',
                layout:{
                "visibility": "visible",
				        "line-join": "round",
	              "line-cap": "round"
                },
                paint:{
                "line-color": "red",
                "line-width": {
                  "base": 1.4,
                  "stops": [
                      [6,1.5],
                      [20,5]
                    ]
                  }
                },
              })
            },error=>{
              console.log(error)
            })
         },
         getdatafill() {
               this.$http.get('mock/poly.json').then(response=>{
                   console.log(response,'response');
                   this.ponitlist=response.data;
                 this.map.addSource('gg',{
                   type:'geojson',
                   data: this.ponitlist
                 });
                 this.map.addLayer({
                    id:'point1',
                    type:'fill',
                    source:'gg',
                    enableEditing: false ,
                    paint:{
                        "fill-color": "red",
                         
                    },
                    layout:{ 
                      "visibility": "visible",
                     
                    }
                 });
              
              this.map.on('click','point1',(e)=>{
               
                console.log(e,'e');
                for(var i=0;i<this.ponitlist.features.length;i++){
                    if(e.features[0].id ==this.ponitlist.features[i].id) {
                      console.log(e.features[0].properties);
                      // var hu=JSON.parse(e.features[0].properties)
                      this.polyes.push(e.features[0].properties);
                      this.drawControl.set({
                        type: 'FeatureCollection',
                        features: [this.ponitlist.features[i]]
                      })
                      console.log(e.features[0].layer);
                      console.log(this.polyes,"sds");
                   };
                }
               
              });
            this.map.on('draw.update',(e)=> {
                console.log(e.features[0],6666);
                for (var i=0;i<this.ponitlist.features.length;i++){
                   if(e.features[0].id ==this.ponitlist.features[i].id){
                   this.ponitlist.features[i]=e.features[0];
                    console.log(this.ponitlist,555);
                    this.map.getSource('gg').setData(this.ponitlist);
                   }
                }
              });
          },error=>{
              console.log(error)
          });
         },
         
         yy(){
         alert('我是父组件方法')
         }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped lang="scss">
        .main{
          width:70%;
          // height:396px;
          // display:flex;
          // flex:1;
          // flex-direction:row;
          .main-map{
            width:70%;
            height:396px;
            #map {
              position:absolute;
              width:70%;
              height:100%;
              // top:0;
              // bottom:0;
            }
           
          }
        }
        
        </style>
